<template>
  <div class="menu-box">
    <el-menu
      :default-active="active"
      class="el-menu-vertical-demo"
      @open="handleOpen"
      @close="handleClose"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <div v-for="(item, index) in subchildren" :key="index">
        <!-- 一级菜单（没有任何子级菜单）-->
        <el-menu-item :index="item.path" v-if="!item.children">
          <i :class="item.icon"></i>
          {{ item.title }}
        </el-menu-item>
        <!-- 一级菜单（有子级菜单）-->
        <el-submenu :index="item.path" v-else>
          <template slot="title"
            ><i :class="item.icon"></i>{{ item.title }}</template
          >

          <!-- 遍历二级菜单容器 -->
          <div v-for="(i, index) in item.children" :key="index">
            <!-- 判断二级菜单（没有三级菜单）-->
            <el-menu-item
              :index="i.path"
              @click="go_url(i.path)"
              v-if="!i.children"
              ><i :class="i.icon"></i>{{ i.title }}{{ i.path }}</el-menu-item
            >

            <!-- 判断二级菜单（有三级菜单）-->
            <el-submenu :index="i.path" v-if="i.children">
              <template slot="title"
                ><i :class="item.icon"></i>{{ i.title }}</template
              >
              <el-menu-item
                @click="go_url(j.path)"
                :index="j.path"
                v-for="(j, index) in i.children"
                :key="index"
                ><i :class="j.icon"></i>{{ j.title }} {{ j.path }}
              </el-menu-item>
            </el-submenu>
          </div>
        </el-submenu>
      </div>
    </el-menu>
  </div>
</template>

<script>
export default {
  name: "menu",
  data() {
    return {
      data: [
        {
          id: 1,
          label: "一级 1",
          children: [
            {
              id: 4,
              label: "二级 1-1",
              children: [
                {
                  id: 9,
                  label: "三级 1-1-1",
                },
                {
                  id: 10,
                  label: "三级 1-1-2",
                },
              ],
            },
            {
              id: 14,
              label: "二级 1-1",
              children: [
                {
                  id: 19,
                  label: "三级 1-1-1",
                },
                {
                  id: 110,
                  label: "三级 1-1-2",
                },
              ],
            },
          ],
        },
        {
          id: 2,
          label: "一级2",
        },
        // {
        //   id: 2,
        //   label: "一级 2",
        //   children: [
        //     {
        //       id: 5,
        //       label: "二级 2-1",
        //     },
        //     {
        //       id: 6,
        //       label: "二级 2-2",
        //     },
        //   ],
        // },
        // {
        //   id: 3,
        //   label: "一级 3",
        //   children: [
        //     {
        //       id: 7,
        //       label: "二级 3-1",
        //     },
        //     {
        //       id: 8,
        //       label: "二级 3-2",
        //     },
        //   ],
        // },
      ],
      subchildren: [],
    };
  },
  methods: {
    go_url(path) {
      this.$router.push({
        path: path,
      });
    },
  },
};
</script>

<style></style>
